<template>
  <el-dialog
    title="订单详情"
    v-model="model"
    width="80%"
    :before-close="handleClose"
  >
    <div class="orderInfo">
      <el-descriptions
        border
        contentClassName="contentStyle"
        labelClassName="labelStyle"
      >
        <el-descriptions-item label="订单编号">
          {{ orderDetail.orderNo || "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="下单地址">
          {{ orderDetail.address || "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="下单时间">
          {{ orderDetail.createTime || "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="服务时间">
          <div>
            最早{{
              orderDetail.serviceTime
                ? dayjs(orderDetail.serviceTime).format("YYYY年MM月DD日 HH点")
                : "-"
            }}
          </div>
          <div>
            最晚{{
              orderDetail.serviceEndTime
                ? dayjs(orderDetail.serviceEndTime).format(
                    "YYYY年MM月DD日 HH点"
                  )
                : "-"
            }}
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="联系人">
          {{ orderDetail.contacts || "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="联系电话">
          {{ orderDetail.phone || "-" }}
        </el-descriptions-item>
        <el-descriptions-item label="支付方式">微信支付</el-descriptions-item>
        <el-descriptions-item label="支付状态">
          <el-tag size="small">{{
            payStatusMap[orderDetail.payStatus]
          }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="支付时间">
          {{ orderDetail.payTime || "-" }}
        </el-descriptions-item>
        <template
          v-for="(item, index) in orderDetail.mallOrderDetailsList"
          :key="index"
        >
          <el-descriptions-item :span="3" label="商品名">
            {{ item.mallProductTitle }}
          </el-descriptions-item>
          <el-descriptions-item label="规格">
            {{ item.mallSkuValue }}
          </el-descriptions-item>
          <el-descriptions-item label="单价">
            {{ item.price }}元
          </el-descriptions-item>
          <el-descriptions-item label="下单数量">
            {{ item.num }}
          </el-descriptions-item>
          <el-descriptions-item :span="3" label="总价">
            {{ item.totalPrice }}元
          </el-descriptions-item>
          <el-descriptions-item :span="3" label="商品图片">
            <el-image
              :src="item.mainImg"
              preview-teleported
              :preview-src-list="[item.mainImg]"
              fit="cover"
              :limit="1"
              style="width: 80px; height: 80px"
            />
          </el-descriptions-item>
        </template>
      </el-descriptions>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关 闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { getMallOrderDetail } from "@/api/workOrder";
import { matchCommunity } from "@/common";
import orderInfo from "./orderInfo.vue";
import dayjs from "dayjs";
const props = defineProps({
  row: {
    type: Object,
    required: true,
  },
});
const emit = defineEmits(["submit"]);

const model = defineModel({
  default: false,
});

const orderDetail = ref({});

const getOrderDetail = async () => {
  const res = await getMallOrderDetail(props.row.id);
  orderDetail.value = res.data;
  console.log("[ orderDetail ]-39", orderDetail.value);
};

onMounted(() => {
  getOrderDetail();
});

const handleClose = () => {
  model.value = false;
};

const payStatusMap = ref({
  0: "未支付",
  1: "已支付",
});
</script>

<style scoped>
.labelStyle {
  width: 200px;
  word-break: break-all;
}
.contentStyle {
  text-align: center;
  width: 400px;
  word-break: break-all;
}
</style>
